<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="${ctxPath}/resource/first/first.css"/>
    <link rel="stylesheet" href="${ctxPath}/component/pear/css/pear.css"/>
    <script src="${ctxPath}/resource/first/encapsulation_class.js"></script>
    <style>
        .eventDate{
            padding-left: 10px;
            color: #b2b2b2;
        }
    </style>
</head>
<body class="pear-container" id="body">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">管控计划</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="top-panel1">
                                <h3>进行中作业数量</h3>
                                <h2 id="plan_cur_num">0</h2>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="top-panel2">
                                <h3>作业总数</h3>
                                <h2 id="plan_all_num">0</h2>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="top-panel3">
                                <div id="main-plan" style="background-color:#ffffff;height:200px;width: 100%">

                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs8 layui-col-md12" style="margin-bottom: 20px">
                            <div class="top-panel4">
                               <ul class="ul-zyfx">
                                   <li class="li-zyfx" style="width: 16%"><span id="val_risk_all">0</span><br>作业风险</li>
                                   <li><span id="val_risk_2">0</span><br>二级</li>
                                   <li><span id="val_risk_3">0</span><br>三级</li>
                                   <li><span id="val_risk_4">0</span><br>四级</li>
                                   <li><span id="val_risk_5">0</span><br>五级</li>
                               </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card top-panel">
                <div class="layui-card-header">管控队伍</div>
                <div class="layui-card-body" style="padding: 5px 15px">
                    <div class="layui-row layui-col-space5 gzdw">
                        <div class="layui-col-xs6 layui-col-md6">
                            <div class="top-panel5">
                                <h3>累计准入</h3><h2 id="team_num_all">0</h2>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md6">
                            <div class="top-panel6">
                                <h3>当前有效准入</h3><h2 id="team_num_cur">0</h2>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="top-panel">
                               <ul class="ul-zys">
                                   <li><div class="div-sl">今日作业单位数</div><div class="sl" id="job_num_team">0</div></li>
                                   <li><div class="div-sl">作业总数</div><div class="sl"  id="job_num_all">0</div></li>
                                   <li><div class="div-sl">三级及以上作业数</div><div class="sl"  id="job_num_risk3">0</div></li>
                                   <li><div class="div-sl">累计负面清单</div><div class="sl"  id="fm_u_all">0</div></li>
                                   <li><div class="div-sl">执行中负面清单</div><div class="sl"  id="fm_u_cur">0</div></li>
                                   <li><div class="div-sl">累计黑名单</div><div class="sl" id="bl_u_all">0</div></li>
                                   <li><div class="div-sl">执行中黑名单</div><div class="sl" id="bl_u_cur">0</div></li>
                               </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header">作业计划分布</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs6 layui-col-md12" style="color: #28333E;" >
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card top-panel">
                <div class="layui-card-header">近期典型违章</div>
                <div class="layui-card-body" style="padding: 5px 15px">
                    <div class="layui-row layui-col-space5" style="padding-bottom: 10px">
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="top-panel">
                                <ul class="ul-zys ul-gundong" style="height: 286px;max-height: 286px;overflow-y: auto">
                                    @var i=1;
                                    @for(item in jqwzInfo!){
                                    <li title="${item.eventName!}" class="web-notice"><div><span class="layui-badge layui-bg-green">${i}</span>&nbsp;&nbsp;${item.eventName! }<span class="eventDate" style="float: right">${item.createTime!}</span></div></li>
                                    @i++;
                                    @}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">管控人员</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs6 layui-col-md12" style="text-align: center">
                          <div class="div-gzrw">
                              <div class="div-zrs layui-col-md3">
                                  <p id="total_person" class="div-p">0</p><p>总人数</p>
                              </div>
                              <div class="div-sd  layui-col-md3">
                                  <p id="person_type_1" class="div-p">0</p><p>输电</p>
                              </div>
                              <div class="div-bd  layui-col-md3">
                                  <p id="person_type_2" class="div-p">0</p><p>变电</p>
                              </div>
                              <div class="div-pd  layui-col-md3">
                                  <p id="person_type_3" class="div-p">0</p><p>配电</p>
                              </div>
                          </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md12 top-panel7" style="width: 95%">
                            <div class="" style="padding: 5px 10px">
                                <div>人员准入</div>
                                <div class="layui-col-xs6 layui-col-md6">
                                    <div class="top-panel-jrzr">
                                        <h3 style="width: 50%!important;text-align: center">今日准入</h3><h2 style="width: 50%!important;text-align: center" id="admittance_today">0</h2>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-md6">
                                    <div class="top-panel-ljzr">
                                        <h3 style="width: 50%!important;text-align: center">累计准入</h3><h2 style="width: 50%!important;text-align: center" id="admittance_all">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md12 top-panel7" style="width: 95%;margin-top: 17px">
                            <div class="" style="padding: 5px 0px">
                                <div>黑名单</div>
                                <ul class="ul-zys">
                                    <li><div class="div-sl">累计负面清单</div><div class="sl" id="fm_p_all">0</div></li>
                                    <li><div class="div-sl">执行中负面清单</div><div class="sl" id="fm_p_cur">0</div></li>
                                    <li><div class="div-sl">累计黑名单</div><div class="sl" id="bl_p_all">0</div></li>
                                    <li><div class="div-sl">执行中黑名单</div><div class="sl" id="bl_p_cur">0</div></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card top-panel">
                <div class="layui-card-header">管控现场</div>
                <div class="layui-card-body" style="height: 296px">
                    <div class="layui-row layui-col-space1">
                        <div class="layui-col-xs6 layui-col-md12">
                            <div class="layui-col-xs6 layui-col-md12 top-panel7" style="padding: 10px 0px;margin: 0">
                                <div class="">
                                    <div style="margin-bottom: 10px">设备数量</div>
                                    <div class="layui-col-xs6 layui-col-md6">
                                        <div class="top-panel6" style="margin:0px 5px;padding-top: 10px;padding-bottom: 10px">
                                            <h3 style="width: 70%!important;text-align: left;color: #fff!important;">移动布控球</h3><h2 style="width: 30%!important;text-align: left" id="cam_num_bkq">0</h2>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6 layui-col-md6">
                                        <div class="top-panel6" style="margin:0px 5px;padding-top: 10px;padding-bottom: 10px">
                                            <h3 style="width: 70%!important;text-align: left;color: #fff!important;">固定摄像头</h3><h2 style="width: 30%!important;text-align: left" id="cam_num_gd">0</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-md12 top-panel7" style="padding: 10px 0px;margin: 0;margin-top: 10px">
                                <div class="">
                                    <div style="margin-bottom: 10px;">今日违章数量</div>
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div class="div-gzrw">
                                            <div class="div-zrs layui-col-md4">
                                                <p class="div-p" id="wz_dqr">0</p><p>待确认</p>
                                            </div>
                                            <div class="div-sd  layui-col-md4">
                                                <p class="div-p" id="wz_yqr">0</p><p>已确认</p>
                                            </div>
                                            <div class="div-bd  layui-col-md4">
                                                <p class="div-p" id="wz_yxj">0</p><p>已消警</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/component/layui/layui.js"></script>
<script src="${ctxPath}/component/pear/pear.js"></script>
<script src="//api.map.baidu.com/api?type=web&v=2.0&ak=UP9aRFsRMlAGV744QkpSoChSY0KeIzb8"></script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts;

        var map = new BMap.Map('map'); // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.946852,38.930559), 11);
        map.enableScrollWheelZoom(true);
        // 创建点标记
        loadAllzyCoordinates(0);
        map.addEventListener('click',function (e){
            // console.log(e.point.lng,e.point.lat);
        })

        gundong();

        // 计划相关
        let plan_cur_num = "${planStatistics.cur_num!0}";
        let plan_all_num = "${planStatistics.total_num!0}";
        let plan_risk_all = "${planStatistics.risk_all!0}";
        let plan_risk_2 = "${planStatistics.risk_2!0}";
        let plan_risk_3 = "${planStatistics.risk_3!0}";
        let plan_risk_4 = "${planStatistics.risk_4!0}";
        let plan_risk_5 = "${planStatistics.risk_5!0}";
        count.up("plan_cur_num", {time: 2000, num: plan_cur_num, bit: 0, regulator: 50});
        count.up("plan_all_num", {time: 2000, num: plan_all_num, bit: 0, regulator: 50});
        count.up("val_risk_all", {time: 2000, num: plan_risk_all, bit: 0, regulator: 50});
        count.up("val_risk_2", {time: 2000, num: plan_risk_2, bit: 0, regulator: 50});
        count.up("val_risk_3", {time: 2000, num: plan_risk_3, bit: 0, regulator: 50});
        count.up("val_risk_4", {time: 2000, num: plan_risk_4, bit: 0, regulator: 50});
        count.up("val_risk_5", {time: 2000, num: plan_risk_5, bit: 0, regulator: 50});

        // 人员相关
        let total_person = "${personStatistics.total_person!0}";
        let person_type_1 = "${personStatistics.person_type_1!0}";
        let person_type_2 = "${personStatistics.person_type_2!0}";
        let person_type_3 = "${personStatistics.person_type_3!0}";
        let admittance_today = "${admittanceInfo.admittance_today!0}";
        let admittance_all = "${admittanceInfo.admittance_all!0}";
        let fm_p_all = "${blInfo.fm_p_all!0}";
        let fm_p_cur = "${blInfo.fm_p_cur!0}";
        let bl_p_all = "${blInfo.bl_p_all!0}";
        let bl_p_cur = "${blInfo.bl_p_cur!0}";
        count.up("total_person", {time: 2000, num: total_person, bit: 0, regulator: 50});
        count.up("person_type_1", {time: 2000, num: person_type_1, bit: 0, regulator: 50});
        count.up("person_type_2", {time: 2000, num: person_type_2, bit: 0, regulator: 50});
        count.up("person_type_3", {time: 2000, num: person_type_3, bit: 0, regulator: 50});
        count.up("admittance_today", {time: 2000, num: admittance_today, bit: 0, regulator: 50});
        count.up("admittance_all", {time: 2000, num: admittance_all, bit: 0, regulator: 50});
        count.up("fm_p_all", {time: 2000, num: fm_p_all, bit: 0, regulator: 50});
        count.up("fm_p_cur", {time: 2000, num: fm_p_cur, bit: 0, regulator: 50});
        count.up("bl_p_all", {time: 2000, num: bl_p_all, bit: 0, regulator: 50});
        count.up("bl_p_cur", {time: 2000, num: bl_p_cur, bit: 0, regulator: 50});

        // 队伍相关
        let team_num_all = "${teamInfo.team_num_all!0}";
        let team_num_cur = "${teamInfo.team_num_cur!0}";
        let job_num_all = "${teamJobInfo.job_num_all!0}";
        let job_num_team = "${teamJobInfo.job_num_team!0}";
        let job_num_risk3 = "${teamJobInfo.job_num_risk3!0}";
        let fm_u_all = "${blInfo.fm_u_all!0}";
        let fm_u_cur = "${blInfo.fm_u_cur!0}";
        let bl_u_all = "${blInfo.bl_u_all!0}";
        let bl_u_cur = "${blInfo.bl_u_cur!0}";
        count.up("team_num_all", {time: 2000, num: team_num_all, bit: 0, regulator: 50});
        count.up("team_num_cur", {time: 2000, num: team_num_cur, bit: 0, regulator: 50});
        count.up("job_num_all", {time: 2000, num: job_num_all, bit: 0, regulator: 50});
        count.up("job_num_team", {time: 2000, num: job_num_team, bit: 0, regulator: 50});
        count.up("job_num_risk3", {time: 2000, num: job_num_risk3, bit: 0, regulator: 50});
        count.up("fm_u_all", {time: 2000, num: fm_u_all, bit: 0, regulator: 50});
        count.up("fm_u_cur", {time: 2000, num: fm_u_cur, bit: 0, regulator: 50});
        count.up("bl_u_all", {time: 2000, num: bl_u_all, bit: 0, regulator: 50});
        count.up("bl_u_cur", {time: 2000, num: bl_u_cur, bit: 0, regulator: 50});

        //管控现场相关
        let cam_num_bkq= "${camInfo.cam_num_bkq!0}";
        let cam_num_gd= "${camInfo.cam_num_gd!0}";
        let wz_dqr= "${wzInfo.wz_dqr!0}";
        let wz_yqr= "${wzInfo.wz_yqr!0}";
        let wz_yxj= "${wzInfo.wz_yxj!0}";
        count.up("cam_num_bkq", {time: 2000, num: cam_num_bkq, bit: 0, regulator: 50});
        count.up("cam_num_gd", {time: 2000, num: cam_num_gd, bit: 0, regulator: 50});
        count.up("wz_dqr", {time: 2000, num: wz_dqr, bit: 0, regulator: 50});
        count.up("wz_yqr", {time: 2000, num: wz_yqr, bit: 0, regulator: 50});
        count.up("wz_yxj", {time: 2000, num: wz_yxj, bit: 0, regulator: 50});

        //加载echarts图表
        $.ajax({
            url: "${ctxPath}/busOperationplan/data/echartsAllplan",
            dataType: 'json',
            data: {},
            type: 'get',
            success: function (result) {
                if (result.length>0){
                    // console.log(result);
                    var dataWks=result[0].sum.split(",");
                    var dataJzx=result[1].sum.split(",");
                    var dataYwc=result[2].sum.split(",");
                    var myChart = echarts.init(document.getElementById("main-plan"));
                    var option;
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        }, legend: {
                            data: ['待开始', '进行中', '已完成'],
                            top: '10'
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: ['目标电网', '现状电网', '煤改电', '小型基建', '基建工程','业扩工程'],
                                offset: 10,
                                axisPointer: {
                                    type: 'shadow'
                                },
                                axisLabel: { interval: 0, rotate: 0 }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量',
                                min: 0,
                                max: 10,
                                interval: 5,
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            }
                        ], series: [
                            {
                                name: '待开始',
                                type: 'bar',
                                data: dataWks
                            },
                            {
                                name: '进行中',
                                type: 'bar',
                                data: dataJzx
                            },
                            {
                                name: '已完成',
                                type: 'bar',
                                data: dataYwc
                            }
                        ]
                    }
                    myChart.setOption(option);
                }
            },error: function (){
                return false;
            }
        });



        window.addZyMarker=function (id,point){
            var size = new BMap.Size(28, 32),
                offset = new BMap.Size(0, -13),
                imageSize = new BMap.Size(28, 32),
                icon = new BMap.Icon("../../admin/images/zy1.png", size, {
                    imageSize: imageSize
                });
            coordinate=point.replace(/\s+/g, "").split(',');
            point=new BMap.Point(coordinate[0].replace(/'/g, ''),coordinate[1].replace(/'/g, ''));
            var zymarker = new BMap.Marker(point, {
                icon: icon,
                offset: offset
            });
            zymarker.id=id;
            map.addOverlay(zymarker);
        }
        function loadAllzyCoordinates(status){
            map.clearOverlays();
            if (status==0){
                status='';
            }
            $.ajax({
                url: "${ctxPath}/busOperationplan/data/loadAllzyCoordinates?status="+status,
                dataType: 'json',
                data: {},
                type: 'get',
                success: function (result) {
                    if (result.length>0){
                        for (var i=0;i<result.length;i++){
                            if(result[i].coordinate!=null){
                                addZyMarker(result[i].id,result[i].coordinate);
                            }
                        }
                    }
                }
            });
        }

        function gundong(){
            var marginTop =0;
            var bool=false;
            // 判断有多少个li
            var lengli = $(".ul-gundong li").length+4;
            if ($(".ul-gundong li").length>9){
                setInterval(function(){
                    if(bool) return;//判断运行和停止
                    $(".ul-gundong li:first").animate({marginTop:marginTop--},10,function(){
                        if(!($(this).is(":animated"))) {    //判断是否有一个动画节点
                            if ((-marginTop) >= $(this).height()*lengli+150) {  //判断移出位置是否超过高度
                                $(this).css("margin", "0");
                                $(this).appendTo($(".text"));  //把第一个节点移到ul后面
                                marginTop = 0;      //重新设置移动数值
                            }
                        }
                    });
                },30);
                $(".ul-gundong").mouseover(function(){   //li鼠标移入，停止移动
                    bool=true;
                });
                $(".ul-gundong").mouseout(function(){
                    bool=false;
                });
            }
        }
    });


</script>
</body>
</html>
